<!-- 商品列表组件 <good-list :list="xx"></good-list> -->
<template>
	<view class="good-list">
		<view :id="'good' + good.curriculumId" class="good-li" v-for="good in list" :key="good.curriculumId">
			<image @click="toCourseDetail(good)" class="good-img" :src="good.cover" mode="aspectFll" />
			<view @click="toCourseDetail(good)" class="flex-item">
				<view class="good-name">{{ good.name }}</view>
				<text class="good-price">{{ good.videoNum }}节课</text>
				<text class="good-sold">最近观看{{ good.viewNum }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	methods: {
		toCourseDetail(item) {
			uni.navigateTo({
				url: '/pages/course/detail/index?id=' + item.curriculumId
			});
		}
	}
};
</script>

<style lang="scss">
.good-list {
	background-color: #fff;

	.good-li {
		display: flex;
		align-items: center;
		padding: 20upx;
		border-bottom: 1upx solid #eee;

		.good-img {
			width: 240rpx;
			height: 160upx;
			margin-right: 20rpx;
			border-radius: 10rpx;
		}

		.flex-item {
			flex: 1;

			.good-name {
				font-size: 34upx;
				// line-height: 3upx;
				height: 80upx;
				margin-bottom: 20upx;
				overflow: hidden;
			}
			.good-price {
				font-size: 26upx;
				color: gray;
			}
			.good-sold {
				font-size: 24upx;
				margin-left: 16upx;
				color: gray;
			}
		}
	}
}
</style>
